<template>
	<el-form ref="form" :inline="true" :model="userModel" :rules="rules" label-width="80px">
		<el-form-item label="用户账号" prop="userName">
			<el-input v-model="userModel.userName" placeholder="用户账号"></el-input>
		</el-form-item>
		<el-form-item label="用户昵称" prop="nickName">
			<el-input v-model="userModel.nickName" />
		</el-form-item>
		<el-form-item label="手机号码" prop="phonenumber">
			<el-input v-model="userModel.phonenumber" maxlength="11" />
		</el-form-item>
		<el-form-item label="邮箱" prop="email">
			<el-input v-model="userModel.email" maxlength="50" />
		</el-form-item>
		<el-form-item label="性别" prop="sex">
			<el-radio-group v-model="userModel.sex" style="width:185px;">
				<el-radio label="0">男</el-radio>
				<el-radio label="1">女</el-radio>
			</el-radio-group>
		</el-form-item>
		<el-form-item label="部门" prop="deptId">
			<treeselect style="width:185px;" v-model="userModel.deptId" :options="deptOptions" :disable-branch-nodes="true" :show-count="true" placeholder="请选择归属部门" />
		</el-form-item>
		<el-form-item label="岗位" prop="postIds">
			<el-select style="width:185px;" v-model="userModel.postIds" multiple placeholder="岗位">
				<el-option v-for="item in postOptions" :key="item.postId" :label="item.postName" :value="item.postId" :disabled="item.status == 1"></el-option>
			</el-select>
		</el-form-item>
		<el-form-item label="宗教信仰" prop="religiousBelief">
			<el-input v-model="userModel.religiousBelief" placeholder="宗教信仰"></el-input>
		</el-form-item>
		<el-form-item label="身份证号" prop="idNumber">
			<el-input v-model="userModel.idNumber" placeholder="身份证号"></el-input>
		</el-form-item>
		<el-form-item label="政治面貌" prop="politicalOutlook">
			<el-input v-model="userModel.politicalOutlook" placeholder="政治面貌"></el-input>
		</el-form-item>
		<el-form-item label="籍贯" prop="nativePlace">
			<el-input v-model="userModel.nativePlace" placeholder="籍贯"></el-input>
		</el-form-item>
		<el-form-item label="现住地址" prop="currentAddress">
			<el-input v-model="userModel.currentAddress" placeholder="现住地址"></el-input>
		</el-form-item>
		<el-form-item label="户籍地址" prop="registerAddress">
			<el-input v-model="userModel.registerAddress" placeholder="户籍地址"></el-input>
		</el-form-item>
		<el-form-item label="民族" prop="nation">
			<el-input v-model="userModel.nation" placeholder="民族"></el-input>
		</el-form-item>
		<el-form-item label="婚姻状况" prop="maritalStatus">
			<el-input v-model="userModel.maritalStatus" placeholder="婚姻状况"></el-input>
		</el-form-item>
		<el-form-item label="岗位状态" prop="postStatus">
			<el-select style="width:185px;" v-model="userModel.postStatus" placeholder="岗位状态">
				<el-option v-for="item in postStatusOptions" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"></el-option>
			</el-select>
		</el-form-item>
		<div v-if="btn" style="padding-left: 80px;">
			<el-form-item>
				<el-button type="primary" size="mini" @click="submit">保存</el-button>
				<el-button type="danger" size="mini" @click="close">关闭</el-button>
			</el-form-item>
		</div>
	</el-form>
</template>

<script>
	import { updateUserProfile } from "@/api/system/user";
	import { treeselect } from "@/api/system/dept";
	import { optionselect } from "@/api/system/post";
	import Treeselect from "@riophae/vue-treeselect";
	import "@riophae/vue-treeselect/dist/vue-treeselect.css";
	export default {
		props: {
			userModel: {
				type: Object
			},
			btn: {
				type: Boolean
			}
		},
		components: {
			Treeselect
		},
		data() {
			return {
				deptOptions: [],
				postOptions: [],
				postStatusOptions: [],
				// 表单校验
				rules: {
					nickName: [{
						required: true,
						message: "用户昵称不能为空",
						trigger: "blur"
					}],
					email: [{
							required: true,
							message: "邮箱地址不能为空",
							trigger: "blur"
						},
						{
							type: "email",
							message: "'请输入正确的邮箱地址",
							trigger: ["blur", "change"]
						}
					],
					phonenumber: [{
							required: true,
							message: "手机号码不能为空",
							trigger: "blur"
						},
						{
							pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
							message: "请输入正确的手机号码",
							trigger: "blur"
						}
					]
				}
			};
		},
		created() {
			/** 查询部门下拉树结构 */
			treeselect().then(response => {
				this.deptOptions = response.data;
			});
			/** 查询岗位下拉树结构 */
			optionselect().then(response => {
				this.postOptions = response.data;
			});
			this.getDicts("post_status_type").then(response => {
				this.postStatusOptions = response.data;
			});

		},
		methods: {
			submit() {
				this.$refs["form"].validate(valid => {
					if(valid) {
						updateUserProfile(this.userModel).then(response => {
							if(response.code === 200) {
								this.msgSuccess("修改成功");
							}
						});
					}
				});
			},
			close() {
				this.$store.dispatch("tagsView/delView", this.$route);
				this.$router.push({
					path: "/index"
				});
			}
		}
	};
</script>